<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Calendar Sample: Desktop</title>				
		<style type="text/css">
			@import "../themes/claro/Calendar.css";
			@import "calendar.css";
			@import "../../../dojo/resources/dojo.css";
			@import "../../../dijit/themes/dijit.css";
			@import "../../../dijit/themes/claro/claro.css";
		</style>			
	</head>
	
	<body class="claro">
		<script type="text/javascript" 
						data-dojo-config="async: true, parseOnLoad: true"
		 				src="../../../dojo/dojo.js"></script>
		
			<script type="text/javascript">

			require(["dojo/_base/declare", "dojo/ready", "dojo/_base/fx", "dojo/on", "dojo/Deferred", "dojo/when",
			         "dojo/date/locale", "dojo/parser",	"dojo/store/JsonRest", 
			         "dojo/store/Memory", "dojo/store/Observable", "dojo/store/Cache", 
			         "dojox/calendar/Calendar", "dojo/date/stamp",
			         "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ],

				function(declare, ready, fx, on, Deferred, when, locale, parser, JsonRest, Memory, Observable, Cache, Calendar, stamp){

					ready(function(){
												
						var startOfWeek = calendar.floorToWeek(new calendar.dateClassObj());
						
						// Subclass to handle the ID problem
						// If the server is generating an ID, the calendar needs the temporary ID
						// to synchronize its internal state.
						var ExtJsonRest = declare(JsonRest, {
							add: function(object, options){
								var tempId = options && options.temporaryId;
								var def = new Deferred();
								when(this.inherited(arguments), function(item){
									item.temporaryId = tempId;
									def.resolve(item);
								});
								return def;
							}
						});
						
						// WARNING
						// This sample needs a service that hosts REST service that can answer to the Jsonrest store !! 
						// WARNING
						
						calendar.on("timeIntervalChange", function(e){
							var startTimeStr = stamp.toISOString(e.startTime, {zulu: true, milliseconds: true});
							var endTimeStr = stamp.toISOString(e.endTime, {zulu: true, milliseconds: true});
							calendar.set("store", new Observable(new ExtJsonRest(
									{target: "/cal/calendar/?startTime="+startTimeStr+"&endTime="+endTimeStr})));
						});

						calendar.set("date", startOfWeek);

						// Enable creation of event interactively by ctrl clicking grid.
						var createItem = function(view, d, e){
						
							// create item by maintaining control key
							if(!e.ctrlKey || e.shiftKey || e.altKey){
								return null;
							}
						
							// create a new event
							var start, end;
							var colView = calendar.columnView;
							var cal = calendar.dateModule;
							
							if(view == colView){
								start = calendar.floorDate(d, "minute", colView.timeSlotDuration);
								end = cal.add(start, "minute", colView.timeSlotDuration); 
							}else{
								start = calendar.floorToDay(d);
								end = cal.add(start, "day", 1);
							}
							
							var item = {
								summary: "New event ",
								startTime: start,
								endTime: end,
								allDay: view.viewKind == "matrix"
							};
							
							return item;
						};
						
						var interactive = true;
						
						if(interactive){
							calendar.set("createOnGridClick", true);
							calendar.set("createItemFunc", createItem);
						}else{
						
							var count = 0;
							calendar.on("gridDoubleClick", function(e){
								var item = createItem(calendar.columnView, e.date, e.triggerEvent);	
								if(item){
									// no id set here and not temporary id in options.
									calendar.get("store").add(item, {temporaryId:"toto"});
								}
								
							});
						}
																		
						// Hide loading panel when application is ready
						fx.fadeOut({
							node:"loadingPanel", 
							onEnd: function(node){
								node.parentNode.removeChild(node)
							}}).play(500);
						

					});
			});
			</script>
			
			<div id="loadingPanel" style="position:absolute;z-index:10;width:100%;height:100%;background:#ffffff">
				<span style="background: #DBEB8F;padding:2px">Loading...</span>
			</div>
			
			<div data-dojo-type="dijit.layout.BorderContainer" style="width:100%;height:100%" data-dojo-props="design:'sidebar', gutters:true" >
		        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false, region:'center'">
		        <div data-dojo-id="calendar" data-dojo-type="dojox.calendar.Calendar" style="position:absolute;left:10px;top:10px;bottom:10px;right:10px">
				</div>
		    </div>
		    
		</div>																		
						
	</body>
</html>
